<template>
    <div id="header">
        <div class="">
            <img src="../assets/image/logo.png" alt="logo" />
        </div>
        <ul class="clearfix">
            <li><a @click="changeLocale" >{{ lang }}</a></li>
            <li>
                <router-link to='/enterpriseApplicate'>{{ $lang('ENTERPRISE_ACCOUNT_APPLICATE') }}</router-link>
            </li>
          
            <li>
                <router-link to='/allCompany' >{{ $lang("ALL_COMPANY") }}</router-link>
            </li>
            <li>
                <router-link to='/'>{{ $lang("BLOCK_CHAIN_BROWSER") }}</router-link>
            </li>
        </ul>
    </div>
    </template>
    
    <script>
    export default {
        data(){
            return {
                lang:"EN"
            }
        },
        created(){
            this.$i18n.locale === 'zh' ? this.lang = 'EN' : this.lang = 'CN' ;
        },
        methods:{
            changeLocale(){
                this.$confirm(this.$lang('CONFIRM_CHANGE'), this.$lang('TIP'), {
                    confirmButtonText: this.$lang('el.messagebox.confirm'),
                    cancelButtonText: this.$lang('el.messagebox.cancel'),
                    type: 'warning'
                }).then(() => {
                    // console.log('切换');
                    let locale = this.$i18n.locale;
                    // 切换语言 
                    locale === 'zh' ? this.$i18n.locale = 'en' : this.$i18n.locale = 'zh';
                    // 切换EN/ZN标识
                    this.$i18n.locale === 'zh' ? this.lang = 'EN' : this.lang = 'CN';
                    //   console.log('切换完成')
                    // 保存语言类型
                    this.$local.save('locale',this.$i18n.locale);
                }).catch(() => {
                    this.$message({
                        message: this.$lang('CANCEL_CHANGE'),
                        type: 'success',
                        showClose:true,
                        duration:1000
                    })      
                })
            }
        }
    }
    </script>
    
    <style lang="scss">
    #header {
        background-color: #1D2849;
        height:72px;
        line-height: 72px;
        border-bottom: 1px solid #212c4f;
        min-width: 100%;
        overflow: hidden;
        margin:  0 auto;
        position: fixed;
        left: 0;
        top:0;
        z-index: 8880;
        & > div {
            float: left;
            line-height: 72px;
            height: 72px;
            padding-left: 20px;
            img {
                vertical-align: middle;
                line-height: 72px;
            }
        }
        ul {
            line-height: 72px;
            padding-right: 20px;
            li {
                float: right;
                a {
                    padding: 0 14px;
                    color: #CCCCCC;
                    cursor:pointer; 
                    font-size: 14px;
                    &:hover {
                        color: #FFF;
                    }
                }
            }
        }
    }
    </style>